<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- BootStrap设计的页面支持响应式的 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Error-404</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        @-webkit-keyframes cursor-blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
        @-moz-keyframes cursor-blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
        @keyframes cursor-blink {
            0% {
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
        
        body {
            background-color: black;
        }

        .four-oh-four-form {
            opacity: 0;
        }

        .terminal {
            position: relative;
        }
        
        .terminal .prompt {
            color: #1ff042;
            display: block;
            font-family: 'AndaleMono', monospace;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 0.15em;
            white-space: pre-wrap;
            text-shadow: 0 0 2px rgba(31, 240, 66, 0.75);
            line-height: 1;
            margin-bottom: 0.75em;
        }
        
        .terminal .prompt:before {
            content: '> ';
            display: inline-block;
        }
        
        .terminal .new-output {
            display: inline-block;
        }
        
        .terminal .new-output:after {
            display: inline-block;
            vertical-align: -0.15em;
            width: 0.75em;
            height: 1em;
            margin-left: 5px;
            background: #1ff042;
            box-shadow: 1px 1px 1px rgba(31, 240, 66, 0.65), -1px -1px 1px rgba(31, 240, 66, 0.65), 1px -1px 1px rgba(31, 240, 66, 0.65), -1px 1px 1px rgba(31, 240, 66, 0.65);
            -webkit-animation: cursor-blink 1.25s steps(1) infinite;
            -moz-animation: cursor-blink 1.25s steps(1) infinite;
            animation: cursor-blink 1.25s steps(1) infinite;
            content: '';
        }

        .kittens p {
            letter-spacing: 0;
            opacity: 0;
            line-height: 1rem;
        }

        .kitten-gif {
            margin: 20px;
            max-width: 300px;
        }

    </style>
    <!-- Icons --><link rel="shortcut icon" href="https://dolyw.com/static/favicon.ico">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- HTML5 Shiv 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!-- [if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif] -->
</head>

<body>

    <div class="col-md-12 col-sm-12 col-xs-12"  style="margin-top: 20px;">
        <div class="terminal">
            <p class="prompt">Oops...!404!</p>
            <p class="prompt">The page you requested cannot be found right meow. Try typing '老鼠' or 'mouse' or '命令' or 'linux' or 'sh'.</p>
            <p class="prompt output new-output"></p>
        </div>
    </div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <form class="four-oh-four-form">
            <input type="text" class="404-input">
        </form>
    </div>

</body>
<script type="text/javascript">
    var inputReady = true;
    var input = $('.404-input');
    input.focus();
    $('.container').on('click', function(e){
        input.focus();
    });

    document.onclick = function(){
        input.select();
    }

    input.on('keyup', function(e){
        $('.new-output').text(input.val());
        // console.log(inputReady);
    });

    $('.four-oh-four-form').on('submit', function(e){
        e.preventDefault();
        var val = $(this).children($('.404-input')).val().toLowerCase();
        var href;

        if (val === 'kitten') {
            showKittens();
        } else if(val === '神兽' || val === '草尼玛' || val === 'beast') {
            showBeast();
        } else if(val === '女生' || val === '女神' || val === 'goddess') {
            showGoddess();
        } else if(val === '老鼠' || val === 'mouse') {
            showMouse();
        } else if(val === 'wang') {
            window.location = "https://dolyw.com";
        } else if(val === 'life') {
            window.location = "https://blog.dolyw.com";
        } else if(val === 'pic' || val === '图片' || val === 'photo' || val === 'picture') {
            window.location = "https://char.dolyw.com/PicToChars.html";
        } else if(val === 'video' || val === '视频') {
            window.location = "https://char.dolyw.com/VideoToChars.html";
        } else if(val === '01') {
            window.location = "https://text.dolyw.com/css3-colorful-text-shadow/index.html";
        } else if(val === '02') {
            window.location = "https://text.dolyw.com/css3-loading-text-animation/index.html";
        } else if(val === '03') {
            window.location = "https://text.dolyw.com/css3-text-shadow-animation/index.html";
        } else if(val === '04') {
            window.location = "https://text.dolyw.com/css3-text-water-loading/index.html";
        } else if(val === '05') {
            window.location = "https://text.dolyw.com/html5-3d-letter-text/index.html";
        } else if(val === '06') {
            window.location = "https://text.dolyw.com/html5-css3-3d-text/index.html";
        } else if(val === '07') {
            window.location = "https://text.dolyw.com/html5-css3-fire-text/index.html";
        } else if(val === '08') {
            window.location = "https://text.dolyw.com/html5-shine-text/index.html";
        } else if(val === '09') {
            window.location = "https://text.dolyw.com/html5-swing-text/index.html";
        } else if(val === '10') {
            window.location = "https://text.dolyw.com/html5-text-pixel/index.html";
        } else if(val === 'sh' || val === 'linux' || val === '命令') {
            window.location = "https://cmd.dolyw.com/sh.html";
        } else {
            resetForm();
        }
    });

    // 各种神兽代码 https://blog.csdn.net/vbirdbest/article/details/78995793

    function showKittens(){
        $('.terminal').append("<div class='kittens'>"+
            "<p class='prompt'>  ┏┓      ┏┓</p>" +
            "<p class='prompt'>┏┛┻━━━┛┻┓</p>" +
            "<p class='prompt'>┃      ☃      ┃</p>" +
            "<p class='prompt'>┃  ┳┛  ┗┳  ┃</p>" +
            "<p class='prompt'>┃      ┻      ┃</p>" +
            "<p class='prompt'>┗━┓      ┏━┛</p>" +
            "<p class='prompt'>    ┃      ┗━━━┓</p>" +
            "<p class='prompt'>    ┃  神兽保佑    ┣┓</p>" +
            "<p class='prompt'>    ┃　永无BUG！   ┏┛</p>" +
            "<p class='prompt'>    ┗┓┓┏━┳┓┏┛</p>" +
            "<p class='prompt'>      ┃┫┫  ┃┫┫</p>" +
            "<p class='prompt'>      ┗┻┛  ┗┻┛</p>" +
            "<p class='prompt'></p></div>"
        );

        var lines = $('.kittens p');
        $.each(lines, function(index, line){
            setTimeout(function(){
                $(line).css({
                    "opacity": 1
                });
                
                textEffect($(line))
            }, index * 100);
        });

        $('.new-output').velocity(
            'scroll'
        ), {duration: 100}

        setTimeout(function(){
            var gif;
            $('.terminal').append('<img class="kitten-gif" src="https://dolyw.gitee.io/reader/Image/201810/normal/30005.gif">');
            resetForm('kitten');
        }, (lines.length * 100) + 1000);
        // window.location="https://dolyw.com";
    }

    function showMouse(){
        $('.terminal').append("<div class='kittens'>"+
            "<p class='prompt'> .--,       .--,</p>" +
            "<p class='prompt'>( (  \\.---./  ) )</p>" +
            "<p class='prompt'> '.__/o   o\__.'</p>" +
            "<p class='prompt'>    {=  ^  =}</p>" +
            "<p class='prompt'>     >  -  <</p>" +
            "<p class='prompt'>    /       \\</p>" +
            "<p class='prompt'>   //       \\\\</p>" +
            "<p class='prompt'>  //|   .   |\\\\</p>" +
            "<p class='prompt'>  &quot;'\\       /'&quot;_.-~^`'-.</p>" +
            "<p class='prompt'>     \\  _  /--'         `</p>" +
            "<p class='prompt'>   ___)( )(___</p>" +
            "<p class='prompt'>  (((__) (__)))</p>" +
            "<p class='prompt'></p></div>"
        );

        var lines = $('.kittens p');
        $.each(lines, function(index, line){
            setTimeout(function(){
                $(line).css({
                    "opacity": 1
                });
                
                textEffect($(line))
            }, index * 100);
        });

        $('.new-output').velocity(
            'scroll'
        ), {duration: 100}

        setTimeout(function(){
            var gif;
            $('.terminal').append('<img class="kitten-gif" src="https://dolyw.gitee.io/reader/Image/201810/normal/30010.gif">');
            resetForm('mouse');
        }, (lines.length * 100) + 1000);
        // window.location="https://dolyw.com";
    }

    function showBeast(){
        $('.terminal').append("<div class='kittens'>"+
            "<p class='prompt'>━━神兽出没━━</p>" +
            "<p class='prompt'> ┏┓     ┏┓</p>" +
            "<p class='prompt'>┏┛┻━━━━━┛┻┓</p>" +
            "<p class='prompt'>┃　　　　　 ┃</p>" +
            "<p class='prompt'>┃　　━　　　┃</p>" +
            "<p class='prompt'>┃　┳┛　┗┳  ┃</p>" +
            "<p class='prompt'>┃　　　　　 ┃</p>" +
            "<p class='prompt'>┃　　┻　　　┃</p>" +
            "<p class='prompt'>┃　　　　　 ┃</p>" +
            "<p class='prompt'>┗━┓　　　┏━┛</p>" +
            "<p class='prompt'>　 ┃　　　┃</p>" +
            "<p class='prompt'>　　┃　　　┃</p>" +
            "<p class='prompt'>　　┃　　　┗━━━┓</p>" +
            "<p class='prompt'>　　┃　　　　　　┣┓</p>" +
            "<p class='prompt'>　　┃　　　　　　┏┛</p>" +
            "<p class='prompt'>　　┗┓┓┏━┳┓┏┛</p>" +
            "<p class='prompt'>　　 ┃┫┫ ┃┫┫</p>" +
            "<p class='prompt'>　　 ┗┻┛ ┗┻┛</p>" +
            "<p class='prompt'>━━感觉萌萌哒━━</p></div>"
        );

        var lines = $('.kittens p');
        $.each(lines, function(index, line){
            setTimeout(function(){
                $(line).css({
                    "opacity": 1
                });
                
                textEffect($(line))
            }, index * 100);
        });

        $('.new-output').velocity(
            'scroll'
        ), {duration: 100}

        setTimeout(function(){
            var gif;
            $('.terminal').append('<img class="kitten-gif" src="https://dolyw.gitee.io/reader/Image/201810/normal/30015.gif">');
            resetForm('beast');
        }, (lines.length * 100) + 1000);
    }

    function showGoddess(){
        $('.terminal').append("<div class='kittens'>"+
            "<p class='prompt'>´´´´´´´´██´´´´´´´</p>" +
            "<p class='prompt'>´´´´´´´████´´´´´´</p>" +
            "<p class='prompt'>´´´´´████████´´´´</p>" +
            "<p class='prompt'>´´`´███▒▒▒▒███´´´´´</p>" +
            "<p class='prompt'>´´´███▒●▒▒●▒██´´´</p>" +
            "<p class='prompt'>´´´███▒▒▒▒▒▒██´´´´´</p>" +
            "<p class='prompt'>´´´███▒▒▒▒██´  </p>" +
            "<p class='prompt'>´´██████▒▒███´´´´´</p>" +
            "<p class='prompt'>´██████▒▒▒▒███´´</p>" +
            "<p class='prompt'>██████▒▒▒▒▒▒███´´´´</p>" +
            "<p class='prompt'>´´▓▓▓▓▓▓▓▓▓▓▓▓▓▒´´</p>" +
            "<p class='prompt'>´´▒▒▒▒▓▓▓▓▓▓▓▓▓▒´´´´´</p>" +
            "<p class='prompt'>´.▒▒▒´´▓▓▓▓▓▓▓▓▒´´´´´</p>" +
            "<p class='prompt'>´.▒▒´´´´▓▓▓▓▓▓▓▒</p>" +
            "<p class='prompt'>..▒▒.´´´´▓▓▓▓▓▓▓▒</p>" +
            "<p class='prompt'>´▒▒▒▒▒▒▒▒▒▒▒▒</p>" +
            "<p class='prompt'>´´´´´´´´´███████´´´´´</p>" +
            "<p class='prompt'>´´´´´´´´████████´´´´´´´</p>" +
            "<p class='prompt'>´´´´´´´█████████´´´´´´</p>" +
            "<p class='prompt'>´´´´´´██████████´´´´</p>" +
            "<p class='prompt'>´´´´´´██████████´´´</p>" +
            "<p class='prompt'>´´´´´´´█████████´´</p>" +
            "<p class='prompt'>´´´´´´´█████████´´´</p>" +
            "<p class='prompt'>´´´´´´´´████████´´´´´</p>" +
            "<p class='prompt'>________▒▒▒▒▒</p>" +
            "<p class='prompt'>_________▒▒▒▒</p>" +
            "<p class='prompt'>_________▒▒▒▒</p>" +
            "<p class='prompt'>________▒▒_▒▒</p>" +
            "<p class='prompt'>_______▒▒__▒▒</p>" +
            "<p class='prompt'>_____ ▒▒___▒▒</p>" +
            "<p class='prompt'>_____▒▒___▒▒</p>" +
            "<p class='prompt'>____▒▒____▒▒</p>" +
            "<p class='prompt'>___▒▒_____▒▒</p>" +
            "<p class='prompt'>███____ ▒▒</p>" +
            "<p class='prompt'>████____███</p>" +
            "<p class='prompt'>█ _███_ _█_███</p>" +
            "<p class='prompt'>━━━━━━━━━━━━</p></div>"
        );

        var lines = $('.kittens p');
        $.each(lines, function(index, line){
            setTimeout(function(){
                $(line).css({
                    "opacity": 1
                });
                
                textEffect($(line))
            }, index * 100);
        });

        $('.new-output').velocity(
            'scroll'
        ), {duration: 100}

        setTimeout(function(){
            var gif;
            $('.terminal').append('<img class="kitten-gif" src="https://dolyw.gitee.io/reader/Image/201810/normal/30010.gif">');
            resetForm('goddess');
        }, (lines.length * 100) + 1000);
    }

    function resetForm(withKittens){
        var message = "Sorry that command is not recognized."
        var input = $('.404-input');

        if (withKittens === 'kitten'){
            $('.kittens').removeClass('kittens');
            message = "这才是真猫!!!((>^ω^<))"
        }else if(withKittens === 'beast'){
            message = "神兽保佑-代码无Bug"
        }else if(withKittens === 'goddess'){
            message = "女神保佑-代码无Bug"
        }else if(withKittens === 'mouse'){
            message = "老鼠保佑-代码无Bug"
        }

        $('.new-output').removeClass('new-output');
        input.val('');
        $('.terminal').append('<p class="prompt">' + message + '</p><p class="prompt output new-output"></p>');

        $('.new-output').velocity(
            'scroll'
        ), {duration: 100}
    }

    function textEffect(line){
        var alpha = [';', '.', ',', ':', ';', '~', '`'];
        var animationSpeed = 10;
        var index = 0;
        var string = line.text();
        var splitString = string.split("");
        var copyString = splitString.slice(0);

        var emptyString = copyString.map(function(el){
            return [alpha[Math.floor(Math.random() * (alpha.length))], index++];
        })

        emptyString = shuffle(emptyString);

        $.each(copyString, function(i, el){
            var newChar = emptyString[i];
            toUnderscore(copyString, line, newChar);

            setTimeout(function(){
                fromUnderscore(copyString, splitString, newChar, line);
            },i * animationSpeed);
        })
    }

    function toUnderscore(copyString, line, newChar){
        copyString[newChar[1]] = newChar[0];
        line.text(copyString.join(''));
    }

    function fromUnderscore(copyString, splitString, newChar, line){
        copyString[newChar[1]] = splitString[newChar[1]];
        line.text(copyString.join(""));
    }

    function shuffle(o){
        for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        return o;
    };
</script>
</html>